<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%--
  Created by IntelliJ IDEA.
  User: lxf
  Date: 2016/5/17
  Time: 17:57
  To change this template use File | Settings | File Templates.
--%>
<html>
<head>
    <title>画板</title>
    <style>
        #drawingCanvas {
            border: 1px solid #000;
            margin: 0 auto;
        }

        #color div, #Thickness div {
            width: 50px;
            height: 50px;
            display: inline-block;
            border: 1px solid black;
        }
    </style>
</head>
<body>
<div id="color">
    <div onclick="changeColor('rgb(212,21,29)',this)" style="background-color: rgb(212,21,29);"></div>
    <div onclick="changeColor('rgb(131,190,61)',this)" style="background-color: rgb(131,190,61);"></div>
    <div onclick="changeColor('rgb(0,86,166)',this)" style="background-color: rgb(0,86,166);"></div>
</div>
<div id="Thickness">
    <div onclick="changeThickness('5',this)">5px</div>
    <div onclick="changeThickness('10',this)">10px</div>
    <div onclick="changeThickness('15',this)">15px</div>
</div>
<div>
    <button class="btn btn-info" onclick="clearCanvas()">清除</button>
</div>
<hr/>
<canvas id="drawingCanvas" width="1000" height="600"></canvas>

<script>
    var canvas = document.getElementById("drawingCanvas");
    var context = canvas.getContext("2d");

    canvas.onmousedown = startDrawing;
    canvas.onmouseup = stopDrawing;
    canvas.onmouseout = stopDrawing;
    canvas.onmousemove = draw;

    var previousColorElement;
    var previousThicknessElement;

    function changeColor(color, imgElement) {
        context.strokeStyle = color;
        console.log(imgElement)
        imgElement.className = "selected";
        if (previousColorElement != null) previousColorElement.className = "";
        previousColorElement = imgElement;
    }

    function changeThickness(thickness, imgElement) {
        context.lineWidth = thickness;
        imgElement.className = "selected";
        if (previousThicknessElement != null) previousThicknessElement.className = "";
        previousThicknessElement = imgElement;
    }

    var isDrawing = false;
    function startDrawing(e) {
        isDrawing = true;
        context.beginPath();
        context.moveTo(e.pageX - canvas.offsetLeft, e.pageY - canvas.offsetTop);
    }
    function draw(e) {
        if (isDrawing == true) {
            var x = e.pageX - canvas.offsetLeft;
            var y = e.pageY - canvas.offsetTop;
            context.lineTo(x, y);
            context.stroke();
        }
    }
    function stopDrawing() {
        isDrawing = false;
    }

    function clearCanvas() {
        context.clearRect(0, 0, canvas.width, canvas.height);
    }

    function seveCanvas() {

    }

</script>
</body>
</html>
